<template>
  <!-- emoji 表情 -->
  <div class="comment-icon-list" v-show="emojiIsShow">
    <!-- 关闭按钮 -->
    <van-icon name="cross" class="comment-cross" @click="emojiIsShow = false" />
    <!-- 表情列表 -->
    <div class="comment-icon-container">
      <span
        v-for="(item, index) in emojis"
        :key="index"
        :title="item.title"
        @click="getEmojiName(item.title)"
      >
        <img :src="item.img" />
      </span>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";

const emojiIsShow = ref(false);

// 子组件定义一个容器 暴露给父组件
const emojiContent = ref("");

/**
 * 统计点击次数 因为暴露给父组件的值需要监听拿到
 */
const clickCount = ref(0)

// 暴露出自己的属性 父组件中可以使用
defineExpose({
  emojiIsShow,
  emojiContent,
  clickCount
});

// 点击 emoji 事件
const getEmojiName = (name) => {
  clickCount.value++
  // 当两次点击一样程序不会执行监听事件（坑）
  emojiContent.value = `[${name}]`;
};
// 表情列表
const emojis = reactive([
  {
    title: "大笑",
    img: "https://s1.music.126.net/style/web2/emt/emoji_86.png",
  },
  {
    title: "可爱",
    img: "https://s1.music.126.net/style/web2/emt/emoji_85.png",
  },
  {
    title: "憨笑",
    img: "https://s1.music.126.net/style/web2/emt/emoji_359.png",
  },
  {
    title: "色",
    img: "https://s1.music.126.net/style/web2/emt/emoji_95.png",
  },
  {
    title: "惊恐",
    img: "https://s1.music.126.net/style/web2/emt/emoji_96.png",
  },
  {
    title: "流泪",
    img: "https://s1.music.126.net/style/web2/emt/emoji_356.png",
  },
  {
    title: "亲",
    img: "https://s1.music.126.net/style/web2/emt/emoji_362.png",
  },
  {
    title: "呆",
    img: "https://s1.music.126.net/style/web2/emt/emoji_352.png",
  },
  {
    title: "哀伤",
    img: "https://s1.music.126.net/style/web2/emt/emoji_342.png",
  },
  {
    title: "呲牙",
    img: "https://s1.music.126.net/style/web2/emt/emoji_343.png",
  },
  {
    title: "吐舌",
    img: "https://s1.music.126.net/style/web2/emt/emoji_348.png",
  },
  {
    title: "撇嘴",
    img: "https://s1.music.126.net/style/web2/emt/emoji_353.png",
  },
  {
    title: "怒",
    img: "https://s1.music.126.net/style/web2/emt/emoji_361.png",
  },
  {
    title: "奸笑",
    img: "https://s1.music.126.net/style/web2/emt/emoji_341.png",
  },
  {
    title: "汗",
    img: "https://s1.music.126.net/style/web2/emt/emoji_97.png",
  },
  {
    title: "痛苦",
    img: "https://s1.music.126.net/style/web2/emt/emoji_346.png",
  },
  {
    title: "惶恐",
    img: "https://s1.music.126.net/style/web2/emt/emoji_354.png",
  },
  {
    title: "生病",
    img: "https://s1.music.126.net/style/web2/emt/emoji_350.png",
  },
  {
    title: "口罩",
    img: "https://s1.music.126.net/style/web2/emt/emoji_351.png",
  },
  {
    title: "大哭",
    img: "https://s1.music.126.net/style/web2/emt/emoji_357.png",
  },
  {
    title: "晕",
    img: "https://s1.music.126.net/style/web2/emt/emoji_355.png",
  },
  {
    title: "发怒",
    img: "https://s1.music.126.net/style/web2/emt/emoji_115.png",
  },
  {
    title: "开心",
    img: "https://s1.music.126.net/style/web2/emt/emoji_360.png",
  },
  {
    title: "鬼脸",
    img: "https://s1.music.126.net/style/web2/emt/emoji_94.png",
  },
  {
    title: "皱眉",
    img: "https://s1.music.126.net/style/web2/emt/emoji_87.png",
  },
  {
    title: "流感",
    img: "https://s1.music.126.net/style/web2/emt/emoji_358.png",
  },
  {
    title: "爱心",
    img: "https://s1.music.126.net/style/web2/emt/emoji_33.png",
  },
  {
    title: "心碎",
    img: "https://s1.music.126.net/style/web2/emt/emoji_34.png",
  },
  {
    title: "钟情",
    img: "https://s1.music.126.net/style/web2/emt/emoji_303.png",
  },
  {
    title: "星星",
    img: "https://s1.music.126.net/style/web2/emt/emoji_309.png",
  },
  {
    title: "生气",
    img: "https://s1.music.126.net/style/web2/emt/emoji_314.png",
  },
  {
    title: "便便",
    img: "https://s1.music.126.net/style/web2/emt/emoji_89.png",
  },
  {
    title: "强",
    img: "https://s1.music.126.net/style/web2/emt/emoji_13.png",
  },
  {
    title: "弱",
    img: "https://s1.music.126.net/style/web2/emt/emoji_372.png",
  },
  {
    title: "拜",
    img: "https://s1.music.126.net/style/web2/emt/emoji_14.png",
  },
  {
    title: "牵手",
    img: "https://s1.music.126.net/style/web2/emt/emoji_379.png",
  },
  {
    title: "跳舞",
    img: "https://s1.music.126.net/style/web2/emt/emoji_380.png",
  },
  {
    title: "禁止",
    img: "https://s1.music.126.net/style/web2/emt/emoji_374.png",
  },
  {
    title: "这边",
    img: "https://s1.music.126.net/style/web2/emt/emoji_262.png",
  },
  {
    title: "爱意",
    img: "https://s1.music.126.net/style/web2/emt/emoji_106.png",
  },
  {
    title: "示爱",
    img: "https://s1.music.126.net/style/web2/emt/emoji_376.png",
  },
  {
    title: "嘴唇",
    img: "https://s1.music.126.net/style/web2/emt/emoji_367.png",
  },
  {
    title: "狗",
    img: "https://s1.music.126.net/style/web2/emt/emoji_81.png",
  },
  {
    title: "猫",
    img: "https://s1.music.126.net/style/web2/emt/emoji_78.png",
  },
  {
    title: "猪",
    img: "https://s1.music.126.net/style/web2/emt/emoji_100.png",
  },
  {
    title: "兔子",
    img: "https://s1.music.126.net/style/web2/emt/emoji_459.png",
  },
  {
    title: "小鸡",
    img: "https://s1.music.126.net/style/web2/emt/emoji_450.png",
  },
  {
    title: "公鸡",
    img: "https://s1.music.126.net/style/web2/emt/emoji_461.png",
  },
  {
    title: "幽灵",
    img: "https://s1.music.126.net/style/web2/emt/emoji_116.png",
  },
  {
    title: "圣诞",
    img: "https://s1.music.126.net/style/web2/emt/emoji_411.png",
  },
  {
    title: "外星",
    img: "https://s1.music.126.net/style/web2/emt/emoji_101.png",
  },
  {
    title: "钻石",
    img: "https://s1.music.126.net/style/web2/emt/emoji_52.png",
  },
  {
    title: "礼物",
    img: "https://s1.music.126.net/style/web2/emt/emoji_107.png",
  },
  {
    title: "男孩",
    img: "https://s1.music.126.net/style/web2/emt/emoji_0.png",
  },
  {
    title: "女孩",
    img: "https://s1.music.126.net/style/web2/emt/emoji_1.png",
  },
  {
    title: "蛋糕",
    img: "https://s1.music.126.net/style/web2/emt/emoji_337.png",
  },
  {
    title: "18",
    img: "https://s1.music.126.net/style/web2/emt/emoji_186.png",
  },
  {
    title: "圈",
    img: "https://s1.music.126.net/style/web2/emt/emoji_312.png",
  },
  {
    title: "叉",
    img: "https://s1.music.126.net/style/web2/emt/emoji_313.png",
  },
]);
</script>
<style lang='less'>
.comment-icon-list {
  z-index: 99;
  position: absolute;
  width: 370px;
  height: 160px;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-top: none;
  border-radius: 4px;
  top: 34px;
  box-shadow: 1px 1px 3px #00000014;
  display: flex;
  align-items: center;
  justify-content: center;

  .comment-cross {
    position: absolute;
    right: 8.5px;
    top: 3px;
    font-size: 20px;
    color: #9999998e;
    font-weight: 400;

    &:hover {
      cursor: pointer;
      color: rgba(0, 0, 0, 0.397);
    }
  }

  .comment-icon-container {
    overflow-y: scroll;
    width: 336px;
    height: 118px;
    display: flex;
    flex-wrap: wrap;
    // 双击取消选中
    user-select: none;

    //设置滚动条整体样式
    &::-webkit-scrollbar {
      width: 3px;
    }
    // 当鼠标经过时显示滚动条
    &:hover {
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.103);
        background-color: #e0e0e0 !important;
      }
    }
    // 滚动条颜色
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
      background-color: #e0e0e000 !important;
    }
    // 未滚动的颜色
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.014);
      border-radius: 0;
      // background: rgba(255, 0, 0, 0.89);
    }

    span {
      flex: 0.1;
      box-sizing: border-box;
      img {
        border: 1px solid rgba(255, 0, 0, 0);
      }

      &:hover {
        cursor: pointer;
        img {
          border: 1px solid rgba(255, 0, 0, 0.671);
        }
      }
    }
  }
}
</style>